<template>
	<view class="index-page">
		<!-- 导航栏 -->
		<!-- #ifndef MP-WEIXIN -->
		<free-nav-bar textContent="首页"></free-nav-bar>	
		<!-- #endif -->
		<view class="index-content" :style="{paddingTop: topHeight + 'px'}">
			<view id="head">
				<view class="search flex">
					<view class="search-input flex">
						<span class="search-icon">
							<img class="svg-img" src="@/static/images/search.svg" alt="">
						</span>
						<input type="text" v-model="searchKeyword" class="input font28 main-text-color" placeholder="输入你想买的">
					</view>
					<view class="search-btns flex font28" @click="searchHandle">搜索</view>
				</view>
				<view class="top-head">
					<free-tabs-list :tabList="tabList" :categoryList="categoryList"
					 @change="change" @updateHeight="updateHeight" @changeCategory="changeCategory"></free-tabs-list>
				</view>
			</view>
			
			<view class="body">
				<z-paging ref="paging" v-model="listData" :show-scrollbar="false" @query="queryList">
					<free-list-item :tab-id="tabId" :listData="listData" @chooseHandle="chooseSpuHandle" :scrollerHeight="scrollerHeight" @loadMore="loadMore"></free-list-item>
				</z-paging>
			</view>
		</view>
	</view>
</template>

<script>
	import freeNavBar from "@/components/free-ui/free-nav-bar.vue"
	import freeListItem from "@/components/free-ui/free-list-item.vue"
	import freeTabsList from "@/components/free-ui/free-tabs-list.vue"
	import zPaging from "@/uni_modules/z-paging/components/z-paging/z-paging.vue";
	import ZPMixin from '@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin'
	import $U from '@/common/free-lib/util.js';
	import $H from '@/common/free-lib/request.js';
	export default {
		components:{
			freeNavBar,
			freeListItem,
			freeTabsList,
			zPaging
		},
		mixins: [ZPMixin],
		data() {
			return {
				phoneHeight: 0, //屏幕可用高度
				topHeight: 0, //滑块上方高度
				bottomHeight: 0, //底部高度
				scrollerHeight: "",
				tabId: undefined,
				currentCateId: undefined,
				currentColumnId: undefined,
				categoryList:[],
				tabList: [],
				listData: [],
				hasMore: true,
				searchKeyword: undefined,
				queryForm: {
					pageNo: 1,
					pageSize: 10,
					columnId: undefined,
					categoryId: undefined
				}
			}
		},
		onLoad() {
			let columnList = $U.getStorage('COLUMN_LIST');
			if(columnList && columnList != '' && columnList != 'null') {
				this.tabList = JSON.parse(columnList);
				this.tabId = this.tabList[0].id
				this.getProductList()
			}
			else {
				let _this = this
				$H.get('/infra/wxIndex/home').then(res => {					
					$U.setStorage('COLUMN_LIST',JSON.stringify(res))
					_this.tabList = res;
					_this.tabId = res[0].id
					_this.getProductList()
				})				
			}
			let cateList = $U.getStorage('CATEGORY_LIST');
			if(cateList && cateList != '' && cateList != 'null') {
				this.categoryList = JSON.parse(cateList);
			}
			else {
				$H.get('/product/category/getCategoryList').then(res => {
					$U.setStorage('CATEGORY_LIST',JSON.stringify(res))
				})
			}
		},
		onShow() {
			this.$store.commit('initHome');
			this.$store.commit('loadUserData');
			console.log('首页');
			this.searchKeyword = '';
		},
		onReady() {
			var height;
			var _this = this;
			uni.getSystemInfo({
				success: function(res) {
					_this.phoneHeight = res.windowHeight;
					_this.$nextTick(() => {
						let view = uni.createSelectorQuery().select("#head"); //局部滑块
						view.boundingClientRect(data => {
							_this.topHeight = data.height;
							height = _this.phoneHeight - _this.topHeight;
							_this.scrollerHeight = height;
						}).exec();
					})
				},
			}); 
		},
		computed:{
		},
		methods: {
			queryList(pageNo, pageSize) {
				this.queryForm.pageNo = pageNo;
				this.queryForm.pageSize = pageSize;
				this.getProductList();
			},
			getProductList() {
				if(this.tabId && this.tabId > 0) {
					let _this = this
					if(this.queryForm.columnId == null || this.queryForm.columnId == '' || this.queryForm.columnId == undefined) {
						this.queryForm.columnId = this.tabId
					}
					if(this.queryForm.categoryId == '' || this.queryForm.categoryId == undefined) {
						this.$delete(this.queryForm, 'categoryId')
					}	
					$H.get('/product/spu/getColumnProductList', this.queryForm).then(res => {
						if(res && res.list) {							
							// _this.listData = _this.listData.concat(res.list)
							_this.$refs.paging.complete(res.list);
						}
					})
				}				
			},
			updateHeight() {
				var height;
				var _this = this;
				uni.getSystemInfo({
					success: function(res) {
						_this.phoneHeight = res.windowHeight;
						_this.$nextTick(() => {
							let view = uni.createSelectorQuery().select("#head"); //局部滑块
							view.boundingClientRect(data => {
								_this.topHeight = data.height;
								height = _this.phoneHeight - _this.topHeight;
								_this.scrollerHeight = height;
							}).exec();
						})
					},
				});
			},
			change(e) {
				this.queryForm.pageNo = 1;
				this.queryForm.pageSize = 10;
				if(e) {
					this.tabId = e.columnId ? e.columnId : this.tabId
					this.currentCateId = e.cateId
					this.queryForm.columnId = this.tabId
					this.queryForm.categoryId = this.currentCateId
				}				
				this.listData = []
				this.getProductList();
			},
			changeCategory(cateId) {
				this.listData = []
				if(cateId && cateId > 0) {
					this.currentCateId = cateId
				}
				else{
					this.currentCateId = undefined
				}
				this.getProductList();
			},
			chooseSpuHandle(id) {
				uni.navigateTo({url: '../../../pages/index/product-detail?pid=' + id});
			},
			searchHandle() {
				if(this.searchKeyword) {
					uni.navigateTo({url: '../../../pages/index/wxsearch?keyword=' + this.searchKeyword});
				}
				else {
					uni.showToast({
						title: '请输入你想找的水果名称',
						icon: 'none'
					});
				}
			},
			onPullingHandle() {
				let _this = this;
				this.listData = [];
				this.queryForm.pageNo = 1;
				this.getProductList();
			},
			loadMore() {
				if(this.hasMore) {
					this.queryForm.pageNo += 1;
					this.getProductList();
				}
				else {
					uni.showToast({
						title: '已无更多数据',
						icon: 'none'
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index-page .other-head-mod{
		border-bottom: none;
	}
	.index-content {
		#head {
			position: fixed;
			top: -1px;
			width: 100%;
			z-index: 10;
			background: #FFFFFF;
			padding: 0 20rpx;
			padding-top: 14rpx;
			box-sizing: border-box;
			
			.search {
				width: 100%;
				height: 80rpx;
				border-radius: 200px;
				background: #F3F3F3;
				justify-content: space-between;
				padding-left: 30rpx;
				box-sizing: border-box;
				
				.search-input {
					padding: 12rpx 0;
					align-items: center;
					flex: 1;
					padding-right: 10rpx;
				}
				
				.search-icon {
					display: block;
					width: 17px;
					margin-right: 14rpx;
					
					.svg-img {
						display: block;
						width: 100%;
					}
				}
				
				.input {
					display: block;
					width: 100%;
				}
				.search-btns {
					width: 112rpx;
					align-items: center;
					justify-content: center;
					border-left: 1px solid #E6E6E6;
					color: #FD5052;
				}
			}
		}
		
		.top-head {
			position: relative;
			width: 100%;
			padding: 14rpx 10rpx;
			box-sizing: border-box;
		}
		
		.body {
			position: relative;		
			/deep/ .z-paging-content-fixed {
				position: static;
				height: 100%;
				
				.zp-scroll-view-absolute,
				.zp-absoulte{
					position: static;
					width: 100%;
					height: 100%; 
				}
			}
		}
	}
</style>
